<!DOCTYPE html>

<html>
    <head>
        <!--
        Customize this policy to fit your own app's needs. For more guidance, see:
            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
        Some notes:
            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
	<meta charset="UTF-8">
<!--	<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline'; connect-src wss:; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"-->
	<meta name="format-detection" content="telephone=no">
	<meta name="msapplication-tap-highlight" content="no">
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
 
	<!--  load these links -->
	<link rel="stylesheet" type="text/css" href="scripts/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="scripts/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="scripts/font-awesome.min.css"/>
	
	<link rel="stylesheet" type="text/css" href="css/index.css"> 
	<link rel="stylesheet" type="text/css" href="css/app.css">  

    <title>Robot Commander</title>
    </head>
	 
	<body>
		<!-- Heading Bar -->
	<ul>
			<!-- <li><a class="mitem" style="color:white; background-color:#006dcc; position:absolute; left:20px; top:15px;" href="#"></a></li-->
	  <li class="mitem" style="list-style-type:none; position:absolute; left:20px; top:10px;"" href="#">Ubiquity Robotics</li>
	  <li class="dropdown" style="position:absolute; right:20px; top:10px;">
		<a class="mitem dropbtn" onclick="toggleDropdown()" style="position:absolute; right:20px; top:0;" href="#"><i id = "ddmenu" class="fa fa-bars"></i></a>
		  <div id="myDropdown" class="dropdown-content mitem" style="position:absolute; left:-290px; top:50px; min-width: 280px;">
			<a href="#" data-toggle="modal" data-target="#helpModal" style="color:black;"><i class="fa fa-circle" aria-hidden="true"></i> Speech Commands</a>
			<a href="#" data-toggle="modal" data-target="#settingsModal" style="color:black;" onclick="openSettings()"><i class="fa fa-cog" aria-hidden="true"></i> Settings</a>				
			<a href="#" data-toggle="modal" data-target="#aboutModal" style="color:black;"><i class="fa fa-circle" aria-hidden="true"></i> About</a>
			  </div>
		  </div>
	   </li>
	</ul>
	
	<br><br>
	<h1 id="cmdr" style="margin-top:20px; font-weight:bold">Robot Commander</h1>
	<br><br>

	<div class="container-fluid"> <div class="row">
		<form role="form" class="form-horizontal" autocomplete="on" onsubmit="connect()">
		    <div id="robot-url" class="form-group ">
		<!--    	<label for="robotUrlEntry" class="control-label col-xs-1" style="font-size:16px;">URL:</label>-->
		    	<div class="col-xs-8">
		        	<input type="url" name="url" id="robotUrlEntry" class="form-control" 
						style="font-size:16px; font-weight:bold" placeholder="0.0.0.0"  />
		    	</div>
				<div class="col-xs-4">
					<button type="button" id="connectButton" class="btn btn-primary" onclick="connect()">
						<strong>Connect</strong></button>
				</div>
			</div>
		</form>
	</div></div>

 <!--   <div id="speed-label"></div>
		<div id="speed-slider"></div>  -->
		
	<div id="connection"  class="container-fluid urlHelp" style="display:block;">
		<H4> Connect to the Robot</H4>
		<p>Enter the robot's IP address above, then press <strong>Connect</strong>.  You don't need to give a 
			port number; the default is 9090.<br>
			<strong>Examples:</strong><br>
			<strong>10.0.1.100</strong><br>
			or, if your network allows names,<br>
			<strong>robbie.local</strong><br>
			To override everything, key it all in, as:<br>
			<strong>wss://10.0.1.100:9099</strong><br>
		</p>
		<div class="text-right"> 
			<button type="button" class="btn btn-success btn-sm" onclick="closeConnectAdvice()">Close</button>
		</div>
	</div>

    <div id="motion" style="display:none;" class="container-fluid">
<!-- Top Row -->
        <div class="row bottom-pad">
 			<div class="col-xs-4" style="text-align:center">
                <span class="fa fa-reply fa-4x toggle gbutton" ontouchstart="fwdTurnLeft()" ontouchend="arrowMotionStop()" data-toggle="tooltip" data-placement="left" title="Forward Turn Right">
                </span>
            </div>
             <div class="col-xs-4" style="text-align:center">
                <span class="fa fa-arrow-up fa-4x toggle gbutton" id="arrowUp" ontouchstart="arrowUpGo()" ontouchend="arrowMotionStop()" data-toggle="tooltip" data-placement="left" title="Forward">
                </span>
            </div>
			<div class="col-xs-4" style="text-align:center">
                <span class="fa fa-share fa-4x toggle gbutton" ontouchstart="fwdTurnRight()" ontouchend="arrowMotionStop()" data-toggle="tooltip" data-placement="left" title="Forward Turn Right">
                </span>
            </div>
        </div>

 <!-- Middle Row -->
        <div class="row">
            <div class="col-xs-4"  style="text-align:center">
                <p><a class="fa fa-rotate-left fa-4x toggle gbutton vcenter"  ontouchstart="arrowLeftGo()" ontouchend="arrowMotionStop()" "data-toggle="tooltip" data-placement="left" title="Rotate Left"></a>
                </p>
            </div>

			<div class="col-xs-4" style="text-align:center">
			<span id='start_button' class="fa-stack fa-3x vcenter"  
					onclick="startButton(event)" alt="Start">
			   <i id='mic-bg' class="fa fa-circle fa-stack-2x gbutton toggle2"></i>   <!-- was #A8A8A8 -->
			   <i id='mic' class="fa fa-microphone fa-stack-1x fa-inverse"></i>
			   <i id='mic-slash' class="fa fa-microphone-slash fa-stack-1x 
						fa-inverse" style="display:none;"></i>
			</span>
			</div>

            <div class="col-xs-4 vcenter" style="text-align:center">
                <span><a class="fa fa-rotate-right fa-4x toggle gbutton"  ontouchstart="arrowRightGo()" ontouchend="arrowMotionStop()""data-toggle="tooltip" data-placement="left" title="Rotate Right" ></a>
                </span>
            </div>
        </div>
	<!-- Bottom Row -->
        <div class="row top-pad">
 			<div class="col-xs-4" style="text-align:center">
                <span class="fa fa-reply fa-4x fa-flip-vertical toggle gbutton" ontouchstart="backTurnLeft()" ontouchend="arrowMotionStop()" data-toggle="tooltip" data-placement="left" title="Back Turn Left">
                </span>
            </div>
             <div class="col-xs-4" style="text-align:center">
                <span class="fa fa-arrow-down fa-4x toggle gbutton" id="arrowDown" ontouchstart="arrowDownGo()" ontouchend="arrowMotionStop()" data-toggle="tooltip" data-placement="left" title="Back">
                </span>
            </div>
			<div class="col-xs-4" style="text-align:center">
                <span class="fa fa-share fa-4x fa-flip-vertical toggle gbutton" ontouchstart="backTurnRight()" ontouchend="arrowMotionStop()" data-toggle="tooltip" data-placement="left" title="Back Turn Right">
                </span>
            </div>
        </div>


		<div class="row top-pad">
            <div class="col-xs-2">
            </div>
			<div class="col-xs-8 vcenter" style="text-align:center">
       			<button type="button" class="btn btn-default btn-lg btn-block toggle3" style="font-size:25" onclick="stopButton()">
					<strong>Stop</strong></button>
            </div>
    	</div>
	</div>

    <div>
        <p id="infoMsg" class="info"></p>
	</div>
	
	<div class="modal" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
		<div class="modal-dialog">
		    <div class="modal-content">
		        <div class="modal-header">
				    <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>-->
				    <h4 class="modal-title" ><strong>Settings</strong></h4>
		        </div>
		        <div class="modal-body mitem">
		            <input type="checkbox"  id="muteButton" role="button" onclick="toggleMute()"> Muted<br><br>
					<input type="checkbox"  id="wakeupButton" role="button" onclick="toggleWakeup()"> Require wakeup word<br><br>
					<input type="checkbox"  id="showUnrecognizedButton" role="button" onclick="toggleUnrecognized()"> Show unrecognized speech<br><br>
					<input type="checkbox"  id="simulatorButton" role="button" onclick="toggleSimulator()"> Use simulator<br><br>
					
					<form class="mitem" action=''>
						<output name='linOut' id='linOut' for='lin'></output>
						<input type='range' id='lin' min='0' max='20' step='1' name='linearSpeed'  oninput='linOut.value= "Linear speed: " + lin.value/10' value='linValue'/>
						<output name='angOut' id='angOut' for='ang'>angValue"</output>
						<input type='range' id='ang' min='0' max='20' step='1' name='angularSpeed' oninput='angOut.value="Angular speed: " + ang.value/10' value='angValue'/>
					</form> 		        
				</div>
		        <div class="modal-footer">
		            <button type="button" class="btn btn-success" onclick="closeSettings() "data-dismiss="modal">Close</button>
		    	</div>
			</div>
	    </div>
	</div>

	<div class="modal" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
		<div class="modal-dialog">
		    <div class="modal-content">
		        <div class="modal-header">
				    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				    <h4 class="modal-title" id="usingSpeech"><strong>Using Speech Commands</strong></h4>
		        </div>
		        <div class="modal-body mitem">
		            <p id="commandHeader"><strong>Commands</strong></p>
					<p class=small>forward, advance, keep going, go ahead, go straight, reverse, back, backward, go back, retreat<br>
					forward/reverse etc., ____ meters/centimeters/feet<br>
					turn right<br>
					turn left<br>
					rotate right (may add "n degrees")<br>
					rotate left (may add "n degrees")<br>
					turn around<br>
					stop, halt<br>
					faster, speed up<br>
					slower, slow down<br>
					(set) waypoint ____ (waypoint name)<br>
					go to ____ (waypoint name)<br>
					remove waypoint ____ (waypoint name)<br>
					list waypoints<br>
					again, repeat<br>
					find (target)<br>
					battery<br>
					help
					</p>
		        </div>
		        <div class="modal-footer">
		            <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
		    	</div>
			</div>
	    </div>
	</div>

	<div class="modal" id="aboutModal" tabindex="-1" class='bootbox-msg' role="dialog" aria-labelledby="basicModal" aria-hidden="true">
		<div class="modal-dialog">
		    <div class="modal-content">
		        <div class="modal-header">
				    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				    <h4 class="modal-title" id="aboutSpeech">About Speech Commands</h4>
		        </div>
		        <div class="modal-body bootbox-msg ">
		            <p>Robot Commander was written for the Ubiquity Robotics robots. It should support any ROS robot.</p>
					<p>Author: Joe Landau jrlandau@gmail.com</p>
					<p>Repository: https://github.com/UbiquityRobotics/Robot_Commander</p>
					<p id="version">This is version 1.</p>
					<p id="platform">platform</p>
		        </div>
		        <div class="modal-footer">
		            <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
		    	</div>
			</div>
	    </div>
	</div>

<!--	<div id="dash">
		<div id="speed_span" "Speed factor 1.00" class="final"></div>
    </div-->
	
	<!-- Extra button for testing stuff 
	<div class="col-xs-3">
		<button type="button" id="testButton" class="btn btn-primary btn-lg" style="font-size:25" onclick="testButton ()">
			<strong>Test Marker</strong></button>
	</div>  -->

	<div id="results">
	Command Log:
 		<div style="height: 100px; overflow: auto;">
			<table id="commandLog">
			</table>
		</div>
		<br>
    </div>

	


<!------------
					<p>Note: To test using the turtle simulator, change the variable topicName to '/turtle1/cmd_vel'. Run the following commands in the terminal, then refresh this page.</p>
					<ol>
						<li><tt>roscore
						</li>
						<li><tt>rosrun turtlesim turtlesim_node
						</li>
						<li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt>
						</li>
						<li><tt>use "rostopic echo /turtle1/cmd_vel" to see the results</tt>
						</li>
					</ol>
					<p>Check the JavaScript console for additional output.</p>
-->
<!--script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script-->
	<script type="text/javascript" src="scripts/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui.min.js"></script>
	<script type="text/javascript" src="scripts/eventemitter2.min.js"></script>
	<script type="text/javascript" src="scripts/roslib.min.js"></script> 
	<script type="text/javascript" src="scripts/bootbox.min.js"></script>
 	<script type="text/javascript" src="cordova.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
		
    </body>
</html>
